<template>
	<view>
		<view class="page_header"></view>
		<!-- food详情 -->
		<view class="food_details">
			<view class="header flex">
				<image :src="info.spicture" mode=""></image>
				<view class="content">
					<view class="info flex">
						<view class="info_header">
							<view class="name textHd">
								{{this.info.sname}}
							</view>
							<view class="instroduction textHd">
								 店铺评分{{this.info.sscore}}
							</view>
						</view>
						<view class="btn" @click.stop="getMore">
							详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="tab">
			<u-tabs active-color="#b22726" :list="tabList" :is-scroll="false" :current="current" @change="tabschange"></u-tabs>
		</view>
		<!-- 菜品 -->
		<view class="foods" v-show="(current == 0)">
			  <u-empty v-show="(this.foodList.length == 0)" mode="list" text="菜品为空" marginTop="240"></u-empty>
			<FoodList :list="foodList" :tag="false"></FoodList>
		</view>
		<!-- 评论 -->
		<view class="comment" v-show="(current == 1)">
		  <view class="header flex">
		  	 <text>全部评论({{total}})</text>
			 <view class="sendComment" @click="navtoSendComment">
			 	发表评论
			 </view>
		  </view>
		    <u-empty v-show="(this.commentList.length == 0)" mode="list" text="评论为空" marginTop="240"></u-empty>
		    <FoodsComment :list="commentList" ></FoodsComment>
		</view>
	</view>
</template>

<script>
	
	import { getStoreDeails } from '../../api/store.js'
	import FoodsComment from '../../components/foods_comments'
	import FoodList from '../../components/foodList.vue'
	export default {
		data() {
			return {
				tabList: [{name: '菜品' }, {name: '评论'}],
				current: 0,
				id: '',
				total: 0,
				foodList: [],
				commentList: [],
				info: {},
				params:  {
					 compageNum: 1, compageSize: 6,pageNum: 1,pageSize: 6,sId: ''
				}
			};
		},
		components: {
			FoodList,FoodsComment
		},
		onLoad(e) {
		  this.params.sId = e.id
		},
		mounted() {
			this.getStoreDetails()
		},
		// 
		methods: {
			// 获取店铺详情
			async getStoreDetails () {
				const res = await getStoreDeails(this.params)
				this.foodList = res.data.data.commodityList
				this.commentList = res.data.data.comment
				this.commentList.map((item, index) => {
					item.releasetime = item.releasetime.slice(0, 16)
				})
				this.info = res.data.data.shop
				this.total = res.data.data.total
			},
			// tab选择的确认
			tabschange(e) {
				this.params.compageNum = 1
				this.params.foodpageNum = 1
				this.current = e
			},
			onReachBottom() {
				if (this.current == 0) {
					this.params.compageNum ++
				} else {
					this.params.pageNum ++
				}
				this.getMoreDetails()
			},
			// 获取更多
			async getMoreDetails () {
				const res = await getStoreDeails(this.params)
				this.foodList = [...this.foodList,...res.data.data.commodityList]
				this.commentList = [...this.commentList, ...res.data.data.comment]
				this.commentList.map((item, index) => {
					item.releasetime = item.releasetime.slice(0, 16)
				})
			},
			// 跳转到店铺页面
			getMore () {
				window.location.href = 'http://shop.m.taobao.com/shop/shop_index.htm?shop_id=60313971'
			},
			// 跳转到发表评论
			navtoSendComment () {
				uni.navigateTo({
					url: `../sendComments/sendComments?id=${this.params.sId}&tag=0`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_header {
		background-color: $theme-color;
		color: #fff;
		height: 180rpx;
}
.food_details {
	width: 700rpx;
	border-radius: 24rpx 24rpx 0 0;
	margin: -120rpx auto 0 auto;
	background-color: #fff ;
	padding: 18rpx;
	.header {
		justify-content: space-between;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}
		.content {
			width: 560rpx;
			.info {
				.info_header {
					width: 400rpx;
					.instroduction {
						line-height: 46rpx;
						color: #999;
						font-size: 20rpx;
					}
					.name {
						font-weight: bold;
						color: $theme-color;
					}
				}
			}
			.btn {
				width: 140rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				background-color: $theme-color;
				color: #fff;
				border-radius: 18rpx;
			}
		}
		.special {
			color: #999;
			font-size: 24rpx;
		}
	}
}
/* tabs */
.tab {
	line-height: 72rpx;
	}
/* 评论 */
.comment {
	padding: 18rpx;
	background-color: #fff;
	.header {
		color: #999;
		color: 28rpx;
		line-height: 72rpx;
		padding-right: 12rpx;
		justify-content: space-between;
		.sendComment {
			background-color: $theme-color;
			color: #fff;
			background-color: 1rpx solid $theme-color;
			font-weight: bold;
			width: 160rpx;
			text-align: center;
			border-radius: 18rpx;
		}
	}
}
</style>
